<template>
  <div class="app-container">
    <el-button type="primary" @click="dialogTableVisible = true"
      >添加</el-button
    >
    <el-table v-if="gg" :data="gg">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="url" label="广告地址"></el-table-column>
      <el-table-column label="广告图片">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="api_url + gg[scope.$index].img_url"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="text" label="广告文字"></el-table-column>
      <el-table-column prop="is_img" label="是否是图片广告"></el-table-column>
      <el-table-column prop="soft" label="广告位置"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="pgg(scope.$index)"
            >更改</el-button
          >
          <el-button type="danger" @click="deletegg(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加广告" :visible.sync="dialogTableVisible">
      <el-form>
        <el-form-item label="广告地址">
          <el-input v-model="agg.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告图片">
        <el-upload
          :action="api_url+'/upimg'"
          list-type="picture-card"
          :on-success="success"
          >
          <i class="el-icon-plus"></i>
        </el-upload>
        </el-form-item>
                <el-form-item label="广告文字">
          <el-input v-model="agg.text" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="是否是图片广告">
    <el-select v-model="agg.is_img" placeholder="请选择">
      <el-option label="是" value="1"></el-option>
      <el-option label="否" value="0"></el-option>
    </el-select>
  </el-form-item>
            <el-form-item label="广告位置">
    <el-select v-model="agg.soft" placeholder="请选择">
      <el-option label="顶部" value="0"></el-option>
      <el-option label="底部" value="1"></el-option>
    </el-select>
  </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="addgg()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
        <el-dialog title="修改广告" :visible.sync="dialogaagg">
      <el-form>
        <el-form-item label="广告地址">
          <el-input v-model="aagg.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告图片">
        <el-upload
          :action="api_url+'/upimg'"
          list-type="picture-card"
          :on-success="success1"
          >
          <i class="el-icon-plus"></i>
        </el-upload>
        </el-form-item>
                <el-form-item label="广告文字">
          <el-input v-model="aagg.text" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="是否是图片广告">
    <el-select v-model="aagg.is_img" placeholder="请选择">
      <el-option label="是" value="1"></el-option>
      <el-option label="否" value="0"></el-option>
    </el-select>
  </el-form-item>
            <el-form-item label="广告位置">
    <el-select v-model="aagg.soft" placeholder="请选择">
      <el-option label="顶部" value="0"></el-option>
      <el-option label="底部" value="1"></el-option>
    </el-select>
  </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogaagg = false">取 消</el-button>
        <el-button type="primary" @click="ppgg()"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGg, putGg, deleteGg, addGg } from "@/api/table";
export default {
  data() {
    return {
      gg: [],
      http_id: 0,
      api_url: process.env.VUE_APP_BASE_API ,
      dialogTableVisible: false,
      dialogaagg:false,
      agg:{
      },// 添加暂留变量
      aagg:{}, // 修改暂留变量
    };
  },
  created() {
    this.http_id = this.$route.query.id;
    this.getgg();
    this.agg.http_id = this.http_id
  },
  methods: {
    getgg() {
      getGg(this.http_id)
        .then((res) => {
          this.gg = res.data_list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deletegg(index) {
      deleteGg(this.gg[index])
        .then((res) => {
          this.getgg();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    addgg(){
      addGg(this.agg).then(res => {
        this.getgg()
        this.dialogTableVisible = false
      }).catch(err => {
        console.log(err)
      })
    },
    pgg(index){
      this.aagg = this.gg[index]
      this.dialogaagg = true
    },
    ppgg(){
      putGg(this.aagg).then(res => {
        this.dialogaagg = false
        this.getgg()
      }).catch(err => {
        console.log(err)
      })
    },
    success(response){
      this.agg.img_url = response.data.file
    },
    success1(response){
      this.aagg.img_url = response.data.file
    }
  },
};
</script>
